<template>
  <div 
    class="base-element"
    :class="`base-element-${elementInfo.id}`"
    :style="{
      zIndex: elementIndex,
    }"
  >
    <component
      :is="currentElementComponent"
      :elementInfo="elementInfo"
      target="thumbnail"
    ></component>
  </div>
</template>
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { ElementTypes, PPTElement } from '@/types/slides'
import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue'
import BaseTextElement from '@/views/components/element/TextElement/BaseTextElement.vue'
import BaseShapeElement from '@/views/components/element/ShapeElement/BaseShapeElement.vue'
import BaseLineElement from '@/views/components/element/LineElement/BaseLineElement.vue'
import BaseChartElement from '@/views/components/element/ChartElement/BaseChartElement.vue'
import BaseTableElement from '@/views/components/element/TableElement/BaseTableElement.vue'
import BaseLatexElement from '@/views/components/element/LatexElement/BaseLatexElement.vue'
import BaseVideoElement from '@/views/components/element/VideoElement/BaseVideoElement.vue'
import BaseAudioElement from '@/views/components/element/AudioElement/BaseAudioElement.vue'
import BaseWeatherElement from '@/views/components/element/WeatherElement/BaseWeatherElement.vue'
import BaseWebpageElement from '@/views/components/element/WebpageElement/BaseWbpageElement.vue'
import BaseHdminElement from '@/views/components/element/HdminElement/BaseHdminElement.vue'
import BasePdfElement from '@/views/components/element/PdfElement/BasePdfElement.vue'
import BaseTimelement from '@/views/components/element/TimeElement/BaseTextElement.vue'
import BaseImagesElement from '../element/imgluboElement/BaseImageElement.vue'

const props = defineProps({
  elementInfo: {
    type: Object as PropType<PPTElement>,
    required: true,
  },
  elementIndex: {
    type: Number,
    required: true,
  },
})

const currentElementComponent = computed(() => {
  const elementTypeMap = {
    [ElementTypes.IMAGE]: BaseImageElement,
    [ElementTypes.IMAGES]: BaseImagesElement, //轮播
    [ElementTypes.TEXT]: BaseTextElement, //文本
    [ElementTypes.SHAPE]: BaseShapeElement,
    [ElementTypes.LINE]: BaseLineElement,
    [ElementTypes.CHART]: BaseChartElement,
    [ElementTypes.TABLE]: BaseTableElement,
    [ElementTypes.LATEX]: BaseLatexElement,
    [ElementTypes.VIDEO]: BaseVideoElement, //视频
    [ElementTypes.AUDIO]: BaseAudioElement, //音频
    [ElementTypes.WEATHER]: BaseWeatherElement,
    [ElementTypes.WEBPAGE]: BaseWebpageElement,
    [ElementTypes.HDMIIN]: BaseHdminElement,
    [ElementTypes.PDF]: BasePdfElement,
    [ElementTypes.TIME]: BaseTimelement,
  }
  return elementTypeMap[props.elementInfo.type] || null
})
</script>